<script lang="ts" setup>
import type {
  SysFilePageQo,
} from '#/system/file/file'
import {
  deleteSysFileApi,
  getSysFilePageListApi,
} from '@/api/system/file/file'

defineOptions({
  name: 'SystemFileList',
})

const columns: TableColumnType[] = [
  {
    type: 'selection',
    fixed: 'left',
    prop: 'selection',
  },
  {
    label: '文件名',
    align: 'center',
    prop: 'fileName',
    width: 300,
  },
  {
    label: '类型',
    align: 'center',
    prop: 'fileType',
    width: 150,
  },
  {
    label: '大小',
    align: 'center',
    prop: 'fileSize',

  },
  {
    label: '文件配置',
    align: 'center',
    prop: 'configName',
    width: 150,
  },
  {
    label: '访问地址',
    align: 'center',
    prop: 'fileUrl',
    width: 300,
  },
  {
    label: '文件路径',
    align: 'center',
    prop: 'filePath',
    width: 300,
  },
  {
    label: '是否公开',
    align: 'center',
    prop: 'isPublic',
    type: 'slot',
    width: 100,
  },
  {
    label: '上传人',
    align: 'center',
    prop: 'createName',
    width: 150,
  },
  {
    label: '上传时间',
    align: 'center',
    prop: 'createTime',
    width: 200,
  },
]
let selectionList = $ref<string[]>([])

// 搜索
const [search, resetClk] = useResetState<SysFilePageQo>(
  { pageNum: 1, pageSize: 10, total: 0 },
  () => {
    loadedTable()
  },
)
// 分页
const { loadedTable, tableData, loading, paginationChange } = useTablePaging(
  getSysFilePageListApi,
  search,
)

// 删除
const [deleteBatch] = useDeleteBatch($$(selectionList), deleteSysFileApi, () => {
  loadedTable()
  selectionList = []
})

onMounted(() => {
  loadedTable()
})
</script>

<template>
  <div
    un-flex="~ col"
    un-h="full"
  >
    <el-card
      un-m-b="2.5"
      body-style="height: 100%;"
      style="overflow: visible;"
    >
      <el-form
        :inline="true"
        :model="search"
        un-grid="~ cols-4"
        class="single-row-search-form"
      >
        <el-form-item label="状态" prop="status">
          <sy-dict
            v-model="search.status"
            dict-type="status"
            placeholder="请选择状态"
            type="select"
          />
        </el-form-item>
        <el-form-item>
          <sy-search-button @search="loadedTable" @reset="resetClk" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card
      un-flex="grow-1"
      body-style="height: 100%;"
    >
      <sy-table
        v-model:selection="selectionList"
        row-key="id"
        height="100%"
        hide-add
        selection-chenge-use="id"
        delete-btn-perms="file:list:delete"
        border
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :paging="search"
        @paging-change="paginationChange"
        @refresh="loadedTable"
        @click-del="deleteBatch"
      >
        <template #isPublic="{ row }">
          <el-tag v-if="row.isPublic">
            公开
          </el-tag>
          <el-tag v-else type="danger">
            私有
          </el-tag>
        </template>
      </sy-table>
    </el-card>
  </div>
</template>

<style scoped>
:deep .sy-drawer__body {
  padding-top: 0 !important;
}
</style>
